<template>
	<div class="ez-qrcode-content" ref="qrCodeUrl" id="qrCode" :style="uiStyle"></div>
</template>

<script>
	import QRCode from "../library/qrcode.js";
	let qrcode;
	export default{
		name: "ez-qrcode",
		data() {
			return {
				src: "",
				timeout: {},
			}
		},
		computed: {
			uiStyle() {
				let style = {}
				style.width = this.size + "px"
				style.height = this.size + "px"
				return style
			}
		},
		methods: {
			makeCode() {
				let that = this;
				this.$refs.qrCodeUrl.innerHTML = "";//销毁旧的二维码
				this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: that.content,
					width: that.size,
					height: that.size,
					colorDark: that.foreground,
					colorLight: that.background,
					correctLevel: this.lv
				});
			},
		},
		mounted() {
			/* console.log(this.content)
			this.makeCode(); */
			console.log("#####################")
		},
		watch: {
			content: {
				handler(newVal , oldVal) {
					this.timeout = setTimeout(() => {
						clearTimeout(this.timeout)
						this.makeCode()
					} , 200)
				},
				immediate: true
			}
		},
		props: {
			content: {	//二维码内容
				type: String,
				defalut: ""
			},
			size: {	//二维码尺寸
				type: [String , Number],
				default: 200
			},
			icon: {	//二维码图标
				type: String,
				default: ""
			},
			iconSize: {	//图标尺寸
				type: [Number , String],
				default: 40
			},
			background: {	//背景色
				type: String,
				default: "#ffffff"
			},
			foreground: {	//前景色
				type: String,
				default: "#000000"
			},
			pdground: {	//定位角点颜色
				type: String,
				default: "#000000"
			},
			lv: {	//容错级别
				type: Number,
				default: 3
			},
		}
	}
</script>

<style lang="less" scoped>
	.ez-qrcode-content{
		width: 100%;
		height: 100%;
	}
	/* .ez-qrcode-content img{
		width: 7rem;
		height: 7rem;
	} */
</style>
